<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/static/tailwind.css" />
    <title>index</title>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
    <style>
        [x-cloak] {
            display: none;
        }

    </style>
</head>

<body x-data="xData()">
    <main class="h-screen flex items-center justify-center bg-gray-200">
        <button class="mx-4 px-6 py-2 font-medium rounded text-white bg-blue-500 hover:bg-blue-400"
            @click="showReg=true">
            Register
        </button>
    </main>

    <section x-cloak x-show="showReg" class="fixed inset-0 flex items-center justify-center" style="z-index: 1040;">
        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <div class="w-full px-4 relative z-10 ">

            <form class="block border shadow-md bg-white py-12 text-lg space-y-4 mt-8 px-4">
                <div class="relative px-2">
                    <h3 class="text-center text-xl font-semibold">Sign up free trail</h3>
                    <button class="absolute top-0 right-0 text-2xl -mt-10 font-medium text-gray-800 hover:text-black"
                        @click.prevent="showReg=false">
                        X
                    </button>
                </div>
                <p x-show="error!=''" x-text="error" class="px-4 py-2 text-red-500"></p>
                <div class="flex items-center w-full">
                    <div class="w-20 flex-shrink-0">
                        <span>Name</span>
                        <i>*</i>
                    </div>
                    <input class="flex-1 px-2 hover:border-blue-400 border rounded" x-model="name"
                        placeholder="First name Last name" type="text" />
                </div>
                <div class="flex items-center">
                    <div class="w-20 flex-shrink-0">
                        <span>Email</span>
                        <i>*</i>
                    </div>
                    <input class="flex-1 px-2 hover:border-blue-400 border rounded" type="email" x-model="email"
                        placeholder="Your email address" />
                </div>
                <div class="flex items-center">
                    <div class="w-20 flex-shrink-0">
                        <span>Phone</span>
                    </div>
                    <input class="flex-1 px-2 hover:border-blue-400 border rounded" type="text"
                        placeholder="(123) 456-7890" x-on:input.debounce="formatPhone()" x-model="phone" />
                </div>
                <div class="flex items-center">
                    <span>Contact me by: </span>
                    <input type="radio" class="ml-4" name="contactBy" value="email" id="email" checked
                        x-model="contact_by" />
                    <label class="ml-1" for="email">Email</label>
                    <input type="radio" class="ml-4" name="contactBy" value="phone" id="phone" x-model="contact_by" />
                    <label class="ml-1" for="phone">Phone</label>
                </div>
                <div class="flex items-start">
                    <span class="inline-block w-20">Message:</span>
                    <div>
                        <textarea class="flex-1 border rounded p-2 hover:border-blue-400" rows="3"
                            x-model="message"></textarea>
                        <div class="text-right text-gray-700" x-text="message.length + '/1000'"></div>
                    </div>
                </div>
                <div class="flex flex-row-reverse">
                    <button class="px-6 py-2 font-medium rounded text-white bg-blue-500 hover:bg-blue-400"
                        @click.prevent="onReg()">
                        Send
                    </button>
                </div>
            </form>
        </div>

    </section>

    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        function xData() {
            return {
                showReg: false,
                name: '',
                email: '',
                phone: '',
                message: '',
                error: '',
                contact_by: 'email',
                onReg() {
                    this.error = ''
                    let result = this.validate()
                    if (true !== result) {
                        this.error = result
                        return false
                    }
                    axios
                        .post('/auth/reg', {
                            name: this.name,
                            email: this.email,
                            phone: this.phone,
                            contact_by: this.contact_by,
                            message: this.message,
                        })
                        .then((res) => {
                            //   console.log(res)
                            this.showReg = false
                            if (res.data == 'ok') {
                                swal({
                                    text: 'Thank you! We will contact you within 1-2 days',
                                    buttons: true,
                                    timer: 3000,
                                })
                            } else {
                                this.errorAlert()
                            }
                        })
                        .catch((err) => {
                            this.errorAlert()
                        })
                },
                validate() {
                    if (this.name.trim().length > 50) {
                        return 'Name length must less 50'
                    }
                    if (this.name.trim() == '') {
                        return 'Name input error'
                    }
                    if (/[0-9]/.test(this.name)) {
                        return 'Name cannot contain number'
                    }
                    var emailReg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
                    if (!emailReg.test(this.email)) {
                        return 'Email address is incorrect.'
                    }
                    if (this.email.length > 50) {
                        return 'Email length must less 50'
                    }
                    return true
                },
                formatPhone() {
                    this.phone = this.phone.trim()
                    let len = this.phone.length
                    if (len == 0) {
                        return
                    }
                    if (this.phone[0] != '(') {
                        this.phone = '(' + this.phone
                        len += 1
                    }
                    if (len >= 4 && this.phone[4] != ')') {
                        this.phone = this.phone.slice(0, 4) + ')' + this.phone.slice(4)
                        len += 1
                    }
                    if (len >= 5 && this.phone[5] != ' ') {
                        this.phone = this.phone.slice(0, 5) + ' ' + this.phone.slice(5)
                        len += 1
                    }
                    if (len >= 9 && this.phone[9] != '-') {
                        this.phone = this.phone.slice(0, 9) + '-' + this.phone.slice(9)
                        len += 1
                    }
                    if (len > 13) {
                        this.phone = this.phone.slice(0, 14)
                    }
                },
                errorAlert() {
                    swal({
                        text: 'Sorry, there is a problem, please try again later',
                        buttons: true,
                        timer: 3000,
                    })
                },
            }
        }
    </script>
</body>

</html>
